<html>
<head>
<!--<style type="text/css">
	#mapdiv {
		width: 800px;
		height: 800px;
	}
	#east {
		position: absolute;
		left: 370px;
		top: 4em;
	}
</style>-->
<!--<script type='text/javascript' src='OpenLayers.js'></script>-->
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src="proj4js/lib/proj4js-combined.js"></script>
<script type='text/javascript' src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type='text/javascript' src='http://www.free-map.org.uk/javascript/ezol.js'></script>
<script type='text/javascript'>


			OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },
 
                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    ); 
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.onClick,
                            'dblclick': this.onDblclick 
                        }, this.handlerOptions
                    );
                }, 
 
                onClick: function(evt) {
                    var output1 = document.getElementById(this.key + "Output1");
					var output2 = document.getElementById(this.key + "Output2");	
                    //var msg = "hello" + evt.xy;
					
                    //var pixel = new OpenLayers.Pixel(evt.xy.x, evt.xy.y).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
					//var lonlat = this.getLonLatFromViewPortPx(evt.xy);
					var lonlat = map.getLonLatFromViewPortPx(evt.xy);
					
					var lonlat2 = lonlat.transform(map.projection, map.displayProjection);
					
					var Longitude = lonlat2.lon;
					var Latitude = lonlat2.lat;
					
					alert("Longitude: " + Longitude + " Latitude: " + Latitude);
					output1.value = output1.value +  "Latitude: " + Latitude;
					output2.value = output2.value + "Longitude: " + Longitude;
					
					//alert("Lat: " + lonlat.lat + " (Pixel.x:" + pixel.x + ")" + "\n" + "Lon: " + lonlat.lon + " (Pixel.y:" + pixel.y + ")" );
					//alert("Lat: " + pos1.lat + "Lon: " + pos1.lon);
					
					//output.value = output.value + "Latitude=" + lonlat.lat + "Longitude=" + lonlat.lon;
					
                },
 
                onDblclick: function(evt) {  
                    var output = document.getElementById(this.key + "Output");
                    var msg = "dblclick " + evt.xy;
                    output.value = output.value + msg + "\n";
                }   
 
            });

	var map, controls;
	
	function init()
	{
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution()],
			numZoomLevels: 14,
			units: 'mi',
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centrepoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
		
		controls = {
			"single": new OpenLayers.Control.Click({
                        handlerOptions: {
                            "single": true
                        }
                    })
				};
				
		//var props = document.getElementById("props");
		var control;
		for(var key in controls) {
				control = controls[key];
                // only to route output here
                control.key = key;
                map.addControl(control);
            }

	
	}
	
	function toggle(key) {
		 var control = controls[key];
			if(control.active) {
					control.deactivate();
				} else {
                control.activate();
            } 
            var status = document.getElementById(key + "Status");
            status.innerHTML = control.active ? "on" : "off";
            var output1 = document.getElementById(key + "Output1");
            output1.value = "";
			var output2 = document.getElementById(key + "Output2"); 
            output2.value = "";
        }
		
</script>
</head>
<body onload="init()">
<div id="mapdiv"></div>
	<div id="east">
		<table>
			<tr>
				<td><button id="singleStatus" onclick="toggle('single')"></td>
				<td><textarea class="output1" id="singleOutput1">asasa</textarea></td>
				<td><textarea class="output2" id="singleOutput2">qwerty</textarea></td>
			</tr>
		</table>
	</div>
</body>
</html>